<template>
  <div class="backcolor">
    <el-row>
    <el-col :span="24">
      <div class="grid-content bg-purple-dark">
        <div style="height:20px">

        </div>
        <el-table
          v-loading="loading"
          :header-cell-style="{fontSize:'13px'}"
          :data="wallet"
          style="width: 100%;font-size: 30px;">
          <el-table-column
            align="center"
            prop="balance"
            label="平台余额"
            >
          </el-table-column>
          <el-table-column
            align="center"
            prop="wait"
            label="待结算金额"
            >
          </el-table-column>
          <el-table-column
            align="center"
            prop="shouyi"
            label="平台收益">
          </el-table-column>
        </el-table>
      </div>


      <div style="height:20px"></div>


      <div class="grid-content2 bg-purple-dark">
        
        <div class="block">
          <div style="height:10px"></div>
          <span class="demonstration">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <el-date-picker
            value-format="yyyy-MM-dd"
            @change="timeOk(value1)"
            v-model="value1"
            type="date"
            placeholder="选择日期"
            :picker-options="pickerOptions">
          </el-date-picker>
          <div style="height:10px"></div>
        </div>

        <div style="width:95%;margin:0px auto">
          <el-table
          v-loading="loading"
          :header-cell-style="{background: '#e5e9f2'}"
          :data="tableData"
          style="width: 100%">
          <el-table-column
          align="center"
            prop="orderTime"
            label="时间"
            >
          </el-table-column>
          <el-table-column
          align="center"
            prop="income"
            label="收入（元）"
            >
          </el-table-column>
          <el-table-column
          align="center"
            prop="amount"
            label="支出（元）"
            >
          </el-table-column>
          <el-table-column
          align="center"
            prop="balance"
            label="余额（元）"
            >
          </el-table-column>
          <!-- <el-table-column
          align="center"
            label="操作"
            width="150"
            >
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            </template>
          </el-table-column> -->
        </el-table>
        </div>
        
        <div class="block" style="text-align: right;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5, 10, 20]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
  </div>
      </div>
    </el-col>
    
  </el-row>
  </div>
  

  
</template>

<script>


export default ({
  methods: {
      handleClick(row) {
        console.log(row);
      },
      timeOk(value1){
        this.$axios.get("http://localhost:7600/wallet/findTime/"+value1).then(res => {
        console.log(res);
          if(res.data != ""){
            this.total=res.data.data.total
            this.tableData=res.data.data.list
          }else{
            this.tableData = []
            this.total = 1
          }
        })
      },
      handleSizeChange(val) {
        this.handleSize = val
        this.$axios.get("http://localhost:7600/wallet/findAll/1/"+this.handleSize).then(res => {
        this.total=res.data.data.total
        this.tableData=res.data.data.list
        })
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        
        this.handleCurrent = val
        this.$axios.get("http://localhost:7600/wallet/findAll/"+this.handleCurrent+"/"+this.handleSize).then(res => {
        this.total=res.data.data.total
        this.tableData=res.data.data.list
        })
      }
    },
    
    mounted(){
       this.$axios.get("http://localhost:7600/wallet/findAll/1/5").then(res => {
        console.log(res);
        this.total=res.data.data.total
        this.tableData=res.data.data.list
        }),
        this.$axios.get("http://localhost:7600/wallet/balance").then(a => {
          this.wallet[0].balance=a.data.data
        })
        this.$axios.get("http://localhost:7600/wallet/waitMoney").then(a => {
          this.wallet[0].wait=a.data.data
        })
        this.$axios.get("http://localhost:7600/wallet/shouyi").then(a => {
          this.wallet[0].shouyi=a.data.data
        })
        this.loading = false
    },

  data(){
    return{
      wallet:[{
        balance:0,
        shouyi:0,
        wait:0
      }],
      loading:true,
      placement:{},
      total:0,
      pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
      },
      value1: '',
      tableData: [],
      currentPage4: 1,
      handleSize:5,
      handleCurrent:1
    }
  }
})
</script>


<style>
  .el-main{
    background-color: #e5e9f2;
    height: 800px;
  }
  
  .bg-purple-dark {
    background: #ffffff;
  }
  
  .grid-content {
    border-radius: 4px;
    min-height: 140px;
  }

  .grid-content2 {
    border-radius: 4px;
    min-height: 550px;
  }

 
table th,
table td {
  border-bottom: none !important;
}

.el-table::before {
  height: 0px;
}
.customer-table .el-table__fixed-right::before,
.el-table__fixed::before {
  width: 0;
}
  
</style>